$f: 19.2;
.banner {
    position: relative;

    // &::before {
    //   content: '';
    //   display: block;
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   width: 100%;
    //   height: 100%;
    //   background: rgba(0, 0, 0, .25);
    // }

    img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

    .text {
        position: absolute;
        left: 240/$f+vw;
        top: 240/$f+vw;

        h1 {
            line-height: 1.2;
            color: #FFF;
            font-size: 75/$f+vw;
            font-weight: 600;
            text-transform: capitalize;
        }

        .line {
            width: 98/$f+vw;
            height: 8/$f+vw;
            background: linear-gradient(90deg, #3E88FF 0%, #146DFC 100%);
            margin: 10/$f+vw 0 30/$f+vw 0;
        }
        .des{
            width: 1048/$f+vw;
            font-size: 20/$f+vw;
            line-height: 1.5;
            color: #FFF;
        }
    }
}

.sec1 {
    padding: 100/$f+vw 0 0;
    position: relative;
    overflow: hidden;
    .go_text{
        position: absolute;
        left: 0;
        bottom: 40/$f+vw;
        z-index: -1;
        .marquee-scroll{
            display: flex;
            width: 100vw;


        }
        .marquee-content{
            display: flex;
            .list{
                width: fit-content;
                opacity: 0.25;
                background: linear-gradient(270deg, rgba(216, 216, 216, 0.20) 0%, #D8D8D8 46.5%, rgba(216, 216, 216, 0.20) 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 240/$f+vw;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                text-transform: uppercase;
                margin: 0 30/$f+vw 0 0;
            }
        }
    }
    .zi {
        position: absolute;
        left: -46/$f+vw;
        top: 246/$f+vw;
        display: flex;
        p {
            font-size: 240/$f+vw;
            font-weight: 700;
            text-transform: uppercase;
            opacity: 0.25;
            background: linear-gradient(270deg, rgba(216, 216, 216, 0.20) 0%, #D8D8D8 46.5%, rgba(216, 216, 216, 0.20) 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .icon {
            width: 110/$f+vw;
            height: 110/$f+vw;
            margin: -18/$f+vw 0 0 116/$f+vw;
        }
    }
    .wrap {
        width: 1440/$f+vw;
        margin: 0 auto;
        .title {
            margin: 0 0 53/$f+vw;
            h1 {
                color: #000;
                font-size: 48/$f+vw;
                font-weight: 600;
                letter-spacing: 0.96/$f+vw;
                text-transform: capitalize;
            }
        }
        .text {
            width: 1231/$f+vw;
            margin: 0 0 107/$f+vw auto;
            p {
                color: #000;
                font-size: 20/$f+vw;
                font-weight: 400;
                line-height: 30/$f+vw; /* 150% */
            }
        }
        .numList {
            display: flex;
            justify-content: space-between;
            .item {
                .num {
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    .count-item {
                        color: #000;
                        font-size: 96/$f+vw;
                        font-weight: 500;
                        line-height: 96/$f+vw; /* 100% */
                    }
                    span {
                        color: #000;
                        font-size: 48/$f+vw;
                        font-weight: 500;
                        text-transform: capitalize;
                    }
                }
                h5 {
                    color: #000;
                    text-align: center;
                    font-size: 16/$f+vw;
                    font-weight: 400;
                    line-height: 21/$f+vw; /* 131.25% */
                    text-transform: capitalize;
                    margin: 20/$f+vw 0 0;
                }
            }
        }
    }
}

.sec2 {
    padding: 100/$f+vw 0 0;
    .wrap {
        width: 1440/$f+vw;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .l {
            width: 545/$f+vw;
            h1 {
                color: #000;
                font-size: 48/$f+vw;
                font-weight: 600;
                letter-spacing: 0.96/$f+vw;
                text-transform: capitalize;
                margin: 0 0 40/$f+vw;
                span {
                    color: #3279FF;
                }
            }
            p {
                color: #666;
                font-size: 20/$f+vw;
                font-weight: 400;
                line-height: 30/$f+vw; /* 150% */
            }
        }
        .r {
            width: 804/$f+vw;
            .item {
                width: 100%;
                border-radius: 20/$f+vw;
                padding: 40/$f+vw;
                position: sticky;
                top:120/$f+vw;
                margin-bottom: 30/$f+vw;
                background: #dce8fe;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                h1 {
                    color: #000;
                    font-size: 40/$f+vw;
                    font-weight: 600;
                    position: relative;
                    z-index: 2;
                }
                p {
                    color: #000;
                    font-size: 20/$f+vw;
                    font-weight: 400;
                    line-height: 150%; /* 30/$f+vw */
                    position: relative;
                    z-index: 2;
                }
                &:nth-child(2) {
                    background: #9dc0ff;
                }
                &:nth-child(3) {
                    background: #4a89ff;
                }
            }
        }
    }
}

.sec3 {
    overflow: hidden;
    padding: 100/$f+vw 0 152/$f+vw;
    position: relative;
    background: linear-gradient(90deg, #D7ECF9 0%, #C0EBD7 100%);
    .bg {
        width: 100%;
        position: absolute;
        top: -784/$f+vw;
        z-index: -1;
        img {
            width: 100%;
        }
    }
    .bg1 {
        position: absolute;
        width: 100%;
        img {
            width: 100%;
        }
    }

    .wrap {
        width: 100vw;
        overflow: hidden;
        h1 {
            color: #000;
            font-size: 40/$f+vw;
            font-weight: 600;
            line-height: 72/$f+vw; /* 180% */
            letter-spacing: 0.8/$f+vw;
            text-transform: capitalize;
            text-align: center;
            margin: 0 0 36/$f+vw;
        }
        .cup {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 69/$f+vw;
            .img {
                width: 100/$f+vw;
                height: 100/$f+vw;
                margin: 0 3/$f+vw;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .line {
                width: 659/$f+vw;
                height: 1/$f+vw;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
                &:nth-last-child(1) {
                    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
                }
            }
        }
        .imgs {
            width: max-content;
            display: flex;
            align-items: center;
            animation: img_go 100s infinite linear;
            .flex {
                display: flex;
                align-items: center;
                .img {
                    display: flex;
                    width: 252/$f+vw;
                    height: 108/$f+vw;
                    justify-content: center;
                    align-items: center;
                    flex-shrink: 0;
                    border-radius: 6.75/$f+vw;
                    background: rgba(255, 255, 255, 0.55);
                    backdrop-filter: blur(2/$f+vw);
                    margin-right: 80/$f+vw;
                    img {
                        display: block;
                        height: 75%;
                        width: 72%;
                        object-fit: contain;
                    }
                }
            }
        }
        .imgs1 {
            margin: 80/$f+vw 0 0;
            animation: img_go2 100s infinite linear;
        }
    }
}
.sec4 {
    padding: 100/$f+vw 0;
    .wrap {
        width: 1440/$f+vw;
        margin: 0 auto;
        .title {
            margin: 0 0 80/$f+vw;
            h1 {
                color: #000;
                font-size: 48/$f+vw;
                font-weight: 600;
                letter-spacing: 0.96/$f+vw;
                text-transform: capitalize;
            }
        }
        .content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item {
                width: 350/$f+vw;
                height: 580/$f+vw;
                border-radius: 20/$f+vw;
                overflow: hidden;
                position: relative;
                transition: 0.6s;
                cursor: pointer;
                .img {
                    width: 680/$f+vw;
                    height: 580/$f+vw;
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .item_text {
                    position: absolute;
                    left: 30/$f+vw;
                    bottom: 30/$f+vw;
                    .block {
                        position: absolute;
                        left: 0;
                        bottom: 44/$f+vw;
                        transition: 0.4s;
                        p {
                            color: #FFF;
                            font-size: 18/$f+vw;
                            font-weight: 400;
                            line-height: 30/$f+vw; /* 166.667% */
                            margin-bottom: 8/$f+vw;
                        }
                        h4 {
                            color: #FFF;
                            font-size: 30/$f+vw;
                            font-weight: 600;
                            letter-spacing: 0.6/$f+vw;
                            text-transform: capitalize;
                        }
                    }
                    .none {
                        width: 620/$f+vw;
                        padding: 10/$f+vw 0 0 ;
                        opacity: 0;
                        transition: 0.6s;
                        p {
                            color: #FFF;
                            font-size: 18/$f+vw;
                            font-weight: 400;
                            line-height: 30/$f+vw; /* 166.667% */
                        }
                    }
                }
                &.on {
                    width: 680/$f+vw;
                    .block {
                        top: 0;
                        bottom: unset;
                        transform: translateY(-100%);
                    }
                    .none {
                        opacity: 1;
                        transition-delay: 0.3s;
                    }
                }
            }
        }
    }
}
.sec5 {
    padding: 100/$f+vw 0;
    position: relative;
    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .wrap {
        width: 1440/$f+vw;
        margin: 0 auto;
        .box {
            width: 680/$f+vw;
            height: 776/$f+vw;
            border-radius: 20/$f+vw;
            position: relative;
            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .text {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 30/$f+vw 40/$f+vw 40/$f+vw;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                h1 {
                    color: #FFF;
                    font-size: 140/$f+vw;
                    font-weight: 600;
                    letter-spacing: 2.8/$f+vw;
                    text-transform: capitalize;
                    position: relative;
                    &::after {
                        content: '';
                        width: 156/$f+vw;
                        height: 9/$f+vw;
                        background: #FFF;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                    }
                }
                p {
                    color: #FFF;
                    font-size: 18/$f+vw;
                    font-weight: 400;
                    line-height: 30/$f+vw; /* 166.667% */
                }
            }
        }
    }
}
@keyframes img_go {
    100% {
        transform: translateX(-50%);
    }
}
@keyframes img_go2 {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}
@media screen and (max-width: 1024px) {
    .banner {
        margin-top: 60px;

        img {
            height: 150px;
        }

        .text {
            left: 5%;
            width: 90%;
            bottom: 30%;

            h1 {
                font-size: 20px;
            }

            .line {
                width: 60px;
                height: 2px;
                margin: 5px 0 15px 0;
            }
        }
    }
    .sec1 {
        padding: 40px 0 60px;
        .go_text{
            top: 50px;
            bottom: unset;
        }
        .wrap {
            width: 90%;
            .title {
                margin: 0 0 20px;
                h1 {
                    font-size: 20px;
                }
            }
            .text {
                width: 100%;
                p {
                    font-size: 14px;
                    line-height: 1.6;
                }
            }

            .zi {
                left: 5vw;

            }
            .numList {
                flex-wrap: wrap;
                .item {
                    width: 50%;
                    margin-bottom: 20px;
                    h5 {
                        font-size: 14px;
                        text-align: left;
                    }
                    .num {
                        margin: 0 0 10px;
                        justify-content: flex-start;
                        .count-item {
                            font-size: 24px;
                            line-height: 1;
                        }
                        span {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
    .sec2 {
        padding: 0 0 40px;
        .wrap {
            width: 90%;
            display: block;
            .l {
                width: 100%;
                margin: 0 0 30px;
                h1 {
                    font-size: 20px;
                }
                p {
                    font-size: 14px;
                    line-height: 1.6;
                }
            }
            .r {
                width: 100%;
                .item {
                    margin-bottom: 30px;
                    padding: 15px 20px;
                    border-radius: 8px;
                    h1 {
                        font-size: 18px;
                        margin: 0 0 10px;
                    }
                    p {
                        font-size: 14px;
                        line-height: 1.6;
                    }
                }
            }
        }
    }
    .sec3 {
        padding: 60px 0;
        .wrap {

            h1 {
                width: 90%;
                font-size: 20px;
                line-height: 1.6;
                margin: 0 auto 20px;
            }
            .cup {
                margin: 0 0 20px;
                .img {
                    width: 60px;
                    height: 60px;
                }
            }
            .imgs {
                .flex {
                    .img {
                        width: 100px;
                        height: 50px;
                        border-radius: 4px;
                    }
                }
            }
        }
    }
    .sec4 {
        padding: 50px 0;
        .wrap {
            width: 90%;
            .title {
                margin: 0 0 30px;
                h1 {
                    font-size: 20px;
                }
            }
            .content {
                display: block;
                .item {
                    width: 100% !important;
                    height: unset;
                    margin-bottom: 40px;
                    .img {
                        width: 100% !important;
                        height: 77vw;
                        border-radius: 10px;
                        overflow: hidden;
                        margin: 0 0 20px;
                    }
                    .item_text {
                        position: unset;
                        .block {
                            position: unset;
                            transform: unset;
                            margin-bottom: 20px;
                            p {
                                font-size: 14px;
                                color: #000;
                                line-height: 1;
                                margin: 0 0 10px;
                            }
                            h4 {
                                font-size: 18px;
                                line-height: 1;
                                color: #000;
                            }
                        }
                        .none {
                            opacity: 1;
                            width: 100%;
                            p {
                                font-size: 14px;
                                line-height: 1.6;
                                color: #000;
                            }
                        }
                    }
                }
            }
        }
    }
    .sec5 {
        padding: 50px 0;
        .wrap {
            width: 90%;
            .box {
                width: 100%;
                height: 100vw;
                border-radius: 10px;
                .text {
                    padding: 25px;
                    h1 {
                        font-size: 20px;
                    }
                    p {
                        font-size: 14px;
                        line-height: 1.6;
                    }
                }
            }
        }
    }
}